<template>
  <div class="detail">
    <div class="topImg">
      <img src="../../../assets/images/u371.jpg" alt="" />
      <p class="back1">
        <van-icon name="arrow-left" size="20" color="white" @click="Back" />
      </p>
      <h2>真空魔法保温杯</h2>
      <p class="p1">反正买了不吃亏，实用就完事~</p>
      <p class="p2">￥90.00</p>
      <div class="tabs">
        <van-tabs
          v-model:active="active"
          swipeable
          @click-tab="changeBgColor(active)"
        >
          <van-tab v-for="item in goodsColor" :title="item.color">
            <div class="left">
              <img v-lazy="getImageUrl(item.imgSrc, 'png')" alt="" />
            </div>
            <div class="right">
              <p class="pPrice">
                <span>型号：MF-S234</span>
                <span class="pricee">￥{{ item.price }}</span>
              </p>
              <p>颜色：{{ item.color }}</p>
              <p>容量：500ml</p>
              <p class="buy" @click="isLogin">立即购买</p>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="detailInfo" :style="{ background: bgColor }"></div>
    <router-link to="/detailPageSon">
      <div class="moreInfo">
        <p>
          <span class="dian"></span>
          <span>查看更多详情</span>
          <span>
            <van-icon name="arrow" size="13" color="gray" />
          </span>
        </p>
        <div class="mag">
          <img v-lazy="getImageUrl('u385', 'png')" alt="" />
        </div>
      </div>
    </router-link>
  </div>
</template>

<script setup>
import { getImageUrl } from "@/uilts/index";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showConfirmDialog } from "vant";
const active = ref("false");
const bgColor = ref("rgb(39,39,39)");
const router = useRouter();
const goodsColor = [
  {
    color: "黑色",
    imgSrc: "download-1",
    price: 90.6,
    bggColor: "rgb(39,39,39)",
  },
  {
    color: "红色",
    imgSrc: "download-3",
    price: 90.6,
    bggColor: "rgb(183,68,68)",
  },
  {
    color: "白色",
    imgSrc: "download-2",
    price: 90.6,
    bggColor: "rgb(204,204,204)",
  },
  {
    color: "金色",
    imgSrc: "download-4",
    price: 90.6,
    bggColor: "rgb(141,127,117)",
  },
];
function Back() {
  router.back();
}
function changeBgColor(index2) {
  goodsColor.forEach((item, index) => {
    if (index2 === index) {
      bgColor.value = item.bggColor;
    }
  });
}
function isLogin() {
  const Token = localStorage.getItem("token");
  if (Token !== null) {
    router.push("/buyDetail");
  } else {
    showConfirmDialog({
      message: "您还没有登录，想要购买商品，需要先登录，是否跳转到登录页？",
    })
      .then(() => {
        router.push("/login");
      })
      .catch(() => {});
  }
}
</script>

<style lang="less" scoped>
a {
  color: black;
}
.detail {
  overflow: hidden;
  .topImg {
    width: 100vw;
    height: 92vw;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .back1 {
      width: 8.5vw;
      height: 8.5vw;
      position: absolute;
      top: 5.667vw;
      left: 4.333vw;
      border-radius: 50%;
      text-align: center;
      line-height: 9.667vw;
      background: black;
    }
    .tabs {
      position: absolute;
      bottom: -40.333vw;
      left: 0vw;
    }
    h2 {
      color: white;
      font-weight: bold;
      position: absolute;
      top: 21.333vw;
      left: 6vw;
    }
    .p1 {
      position: absolute;
      top: 31.333vw;
      left: 6vw;
      color: white;
      font-size: 3.533vw;
      font-weight: bold;
    }
    .p2 {
      position: absolute;
      top: 40.333vw;
      left: 6vw;
      color: white;
      font-size: 7vw;
      font-weight: bold;
    }
    .goodsColor {
      width: 300px;
      display: flex;
      justify-content: space-around;
      position: absolute;
      bottom: 10.6vw;
      left: 9.667vw;
      li {
        width: 14vw;
        height: 7.8vw;
        border-radius: 2px;
        color: white;
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      li.active {
        background: rgb(0, 0, 0);
        font-weight: bold;
      }
    }
  }
  .detailInfo {
    height: 87.667vw;
  }
  .moreInfo {
    position: absolute;
    bottom: 9vw;
    right: 0vw;
    width: 93.333vw;
    height: 31.333vw;
    background: white;
    border-radius: 1.333vw 0vw 0vw 1.333vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    p {
      display: flex;
      margin-top: 1.333vw;
      height: 6.667vw;
      line-height: 6.667vw;
      margin-left: 2.667vw;
      span {
        margin-right: 10px;
        color: gray;
        font-size: 3.567vw;
        font-weight: bold;
      }
      .dian {
        width: 3.3vw;
        height: 3.3vw;
        margin-top: 1.333vw;
        background: black;
        border-radius: 50%;
      }
    }
    .mag {
      width: 86.667vw;
      height: 23.667vw;
      margin-left: 6.667vw;
    }
    img {
      width: 100%;
      height: 100%;
      // display: flex;
    }
  }
  :deep(.van-tab--active) {
    padding: 0vw 3.333vw;
    color: white;
    font-size: 4.6vw;
    background: black;
    margin-left: 5vw;
    border-radius: 0.667vw;
  }
  :deep(.van-tab) {
    font-size: 3.5vw;
    margin-left: 6.5vw;
    flex: none;
    padding: 0;
    font-weight: 600;
    color: white;
  }
  :deep(.van-tabs--line .van-tabs__wrap) {
    height: 7.333vw;
    margin-bottom: 4.8vw;
  }
  :deep(.van-tabs__nav) {
    background: transparent;
  }
  :deep(.van-tab__text--ellipsis) {
    padding: 0vw 4.333vw;
  }
}
:deep(.van-tabs__line) {
  width: 0;
}
:deep(.van-tab__panel) {
  width: 80.333vw;
  height: 36.333vw;
  background: white;
  border-radius: 1.333vw;
  padding: 5.667vw 4vw;
  display: flex;
  .left {
    margin-right: 4.667vw;
    img {
      width: 9.533vw;
      height: 23.2vw;
    }
  }
  .right {
    position: relative;
    p {
      font-size: 3.6vw;
      font-weight: bold;
      margin-bottom: 2.333vw;
    }
    .pPrice {
      .pricee {
        margin-left: 14.333vw;
        font-size: 4.8vw;
        font-weight: bold;
      }
    }

    .buy {
      position: absolute;
      right: -3.867vw;
      bottom: 0.667vw;
      font-size: 3.5vw;
      border: 0.133vw solid black;
      padding: 0.8vw 3.667vw;
    }
  }
}
:deep(.van-swipe__track) {
  width: 81.333vw;
  margin-left: 6.333vw;
}
</style>
